<template>
   <a-form
        :model="formState"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
    >
    <template v-for="(item,index) in formListAll" :key="index">
        <a-form-item 
            :label="item.label"
            :name="item.name" v-if="item.show!==false" :rules="item.rules">
            <template v-if="item.type=='text'">
                <a-input v-model:value="formState[item.name]" />
            </template>
            <template v-if="item.type=='password'">
                <a-input-password v-model:value="formState[item.name]" />
            </template>
            <template v-if="item.type=='select'">
                <a-select
                v-model:value="formState[item.name]"
                :fieldNames="item?.fieldNames"
                style="width: 200px"
                :options="item.options"></a-select>
            </template>


        
            <template v-if="item.type=='treeselect'">
                <a-tree-select
                    v-model:value="formState[item.name]"
                    style="width: 180px"
                    :tree-data="item.options"
                    allow-clear
                    placeholder="请选择"
            />
            </template>

            <template v-if="item.type=='radio'">
                <a-radio-group
                v-model:value="formState[item.name]"
                :options="item.options"
            />
            </template>

            <template v-if="item.type=='datepicker'">
                <a-date-picker v-model:value="formState[item.name]" @change="(date:any,datestr:string)=>updateDate(datestr,item.name)" />
            </template>
        
        </a-form-item>
    </template>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-item>
    </a-form>
</template>

<script lang='ts' setup>
import { reactive,ref,onMounted} from 'vue'
import type {IFormProps,IActionsProps} from '@/interface/form'
import axiosEl from '@/utils/axios';
interface IFormPublicProps {
    formList:IFormProps[],
    actions:IActionsProps,
    kind:'add' | 'edit',
    rowKey:string,
    currentData?:any   // 当前修改的数据
}

// 接受父组件的props
const props = defineProps<IFormPublicProps>();
const formListAll = ref<IFormProps[]>(props.formList);
// 搜索的数据
const formState = reactive<any>({});
// formData是用来处理特殊格式的数据
const formData = reactive<any>({})


// 格式化日期
const updateDate = (date:string,name:string)=>{
    formData[name] = date;
}
onMounted(()=>{
// 循环 searchList, 是否有 optionApi ， 如果有 就调接口
    formListAll.value.forEach(async (item)=>{
        // 是否有需要调接口的
            if(item.optionApi){
                const {url,method,data} = item.optionApi;
               let res = await axiosEl({
                    url:url,
                    method:method || 'get',
                    data:data
                }) 
                
                item.options = Array.isArray(res.rows) ? res.rows : res.rows.children;  // 无法重新渲染
            }
            // 是否 写入初始值
            if(item.initval) {
                formState[item.name] = item.initval;
            }
            // 是否有需要验证的表单
            if(item.rules) {
                let datas = item.rules.map((opt:any)=>{  
                    if(opt.required){
                        return { required: true, message: '请输入'+item.label }
                    }
                    if(opt.pattern){
                        return { 
                            pattern:opt.pattern,
                            message:opt.error
                         }
                    }
                })
                item.rules = datas;
            }
            // 当编辑的时候， 赋值
            if(props.kind=='edit') {
                formState[item.name] = props.currentData[item.name];
            }
        })
})

const onFinish = (values: any) => {
    console.log('Success:', values);
    let datas = {...values, ...formData};
    const apiObj =  props.actions[props.kind];

      // 在提交的时候， 可以统一处理select的数据， 组件给的是数据， 但是 新增或者编辑的时候， 需要的是字符串
      formListAll.value.forEach((item)=>{
        if(item.type=='select') {
            datas[item.name] = datas[item.name].join(',')
        }
      })
        if(!apiObj) return;

        if(props.kind=='edit') {
            datas[props.rowKey] = props.currentData[props.rowKey];
        }
        //添加数据
        axiosEl({
            url:apiObj.url,
            method:apiObj.method || 'get',
            data:datas,
            headers:{
                'Content-Type':apiObj.contentType
            }
        }).then((res)=>{
            console.log('新增成功');
            
        })
    
 
  };

</script>

<style lang='less' scoped>
</style>